<template>
  <sweet-input style="margin-top: 10px" v-model="searchVal" @keyup.enter="searchTree"></sweet-input>
  <sweet-virtual-tree
    style="height: 400px"
    ref="tree"
    virtualScroll
    virtualData
    showLine
    showCheckbox
    :data="dataSource"
    node-key="id"
    :filter-strictly="false"
    :filter-node-method="filterNode"
    :default-checked-keys="defaultCheckedKeys"
    :default-expanded-keys="defaultExpandedKeys"
    @scroll-to-top="scrollToTop"
    @check="nodeCheck"
  >
  </sweet-virtual-tree>
</template>
<script setup lang="ts">
import {ref} from 'vue';
const defaultExpandedKeys = ref(['root', '1', '2', '4', '11', '12', '14']);
const defaultCheckedKeys = ref(['1-3', '1-4']);
const searchVal = ref('');
const tree = ref();

const searchTree = () => {
  tree.value.filter(searchVal.value);
};
const filterNode = (value, node) => {
  const str = ((node && node.label) || '').toUpperCase();
  return str.indexOf(value.toUpperCase()) !== -1;
};

const nodeCheck = (data, checkedParam) => {
  console.log(checkedParam);
  console.log(tree.value.getCheckedNodes(true, false));
};

const setCheckedKeys = () => {
  tree.value.setCheckedKeys([2]);
};

const expandNode = () => {
  tree.value.expandNode(2);
};
const collapseNode = () => {
  tree.value.collapseNode(2);
};

interface Tree {
  id: number;
  label: string;
  children?: Tree[];
  disabled?: boolean;
}
const scrollToTop = () => {
  console.log('scrollToTop');
};

const dataSource = ref([
  {
    id: `root`,
    label: 'root',
    children: []
  }
]);

for (let i = 0; i < 200; i++) {
  const children = [];
  for (let j = 0; j < 100; j++) {
    children.push({
      id: `${i}-${j}`,
      label: `Level two ${i}-${j}`
    });
  }

  const obj = {
    id: `${i}`,
    label: `Level one ${i}`,
    children
  };
  dataSource.value[0].children.push(obj);
}
</script>
